<template>
  <a-layout>

    <a-layout-content
        :style="{background: '#fff', padding:'24px', margin: 0, minHeight:'280px'}">

      <a-form
          layout="inline"
          :model="state"
      >
        <a-form-item>
          <a-input v-model:value="state.name" placeholder="名称">
          </a-input>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" @click="load" >查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="add" >新增</a-button>
        </a-form-item>

      </a-form>

      <a-table :dataSource="user" :columns="columns" :pagination="pagination" @change="handleTableChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'cover'">
            <img v-if="record.cover" :src="record.cover" style="width: 50px; height: 50px">
          </template>

<!--          <template v-if="column.key === 'categories'">-->
<!--            {{getCategoryName(record.category1Id)}} / {{getCategoryName(record.category2Id)}}-->
<!--          </template>-->

          <template v-else-if="column.key === 'action'">
            <a-space>
<!--              <router-link :to="{path: 'adminDoc', query: {id: record.id }}">-->
<!--                <a-button type="primary" >文档</a-button>-->
<!--              </router-link>-->

              <!--              <router-link :to="'/adminDoc?id='+record.id">-->
              <!--                <a-button type="primary" >文档2</a-button>-->
              <!--              </router-link>-->

              <a-button type="primary" @click="edit(record)">编辑</a-button>

              <a-popconfirm
                  title="是否确认删除?"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="del(record.id)"
              >
                <a-button type="primary" danger >删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-layout-content>

    <a-modal
        v-model:visible="visible"
        title="Title"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
    >

      <!--      <p>表单</p>-->
      <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="昵称">
          <a-input v-model:value="formState.name" />
        </a-form-item>
        <a-form-item label="用户名">
          <a-input v-model:value="formState.loginName" :disabled="formState.id" />
        </a-form-item>
<!--        <a-form-item label="分类">-->
<!--          <a-cascader v-model:value="categoryIds"-->
<!--                      :field-names="{ label: 'name', value: 'id', children: 'children'}"-->
<!--                      :options="level"/>-->
<!--        </a-form-item>-->
        <a-form-item label="密码">
          <a-input v-model:value="formState.password" />
        </a-form-item>

      </a-form>

    </a-modal>
  </a-layout>
</template>

<script>
import {message} from "ant-design-vue"
import axios from "axios"
import {onMounted, ref} from "vue";
import {arrayToTree} from "@/util/Tool";

export default {
  name: "AdminUser",
  setup(){
    const state = ref({})
    const formState = ref({})
    const user = ref()
    // const categoryIds = ref([])
    const columns = ref([
      {
        title: '昵称',
        dataIndex: 'name',
      },
      {
        title: '用户名',
        dataIndex: 'loginName',
      },
      {
        title: '密码',
        dataIndex: 'password',
      },
      {
        title: '操作',
        key: 'action',
      }
    ])
    const pagination = ref({
      total:'',
      current:1,
      pageSize:10
    })
    const load = ()=>{
      axios.get("api/getAllUser",{
        params:{
          pageNum: pagination.value.current,
          pageSize: pagination.value.pageSize,
          name: state.value.name
        }
      }).then(res=>{
        if (res.data.code === "200"){
          user.value = res.data.date.list
          pagination.value.total = res.data.date.total
        } else {
          message.error(res.data.msg);
        }
      })
    }

    // let category = []
    // const level = ref()
    // const loadCategory = ()=>{
    //   axios.get("api/getAllCategory").then(res=>{
    //     if (res.data.code === "200"){
    //       category = res.data.date
    //
    //       level.value = arrayToTree(category, 0)
    //
    //     } else {
    //       message.error(res.data.msg);
    //     }
    //   })
    // }
    onMounted(()=>{
      load()
      // loadCategory()
    })

    const handleTableChange = (pagination2)=>{
      pagination.value = pagination2
      load()
    }

    const visible = ref(false);
    const confirmLoading = ref(false);

    const edit = (record) => {
      // categoryIds.value[0] = record.category1Id;
      // categoryIds.value[1] = record.category2Id;
      formState.value = JSON.parse(JSON.stringify(record));
      visible.value = true;
    };

    const add = () => {
      formState.value = {};
      visible.value = true;
      load()
    };

    const del = (id) => {
      axios.delete("api/deleteUser/" + id).then(res=>{
        if (res.data.code === "200"){
          load()
          message.success(res.data.msg);
        } else {
          message.error(res.data.msg);
        }
      })
    };

    // const getCategoryName = (categoryId)=>{
    //   for (let i=0; i<category.length; i++) {
    //     const c = category[i]
    //     if (c.id == categoryId) {
    //       return c.name
    //     }
    //   }
    // }

    const handleOk = () => {
      confirmLoading.value = true;
      // formState.value.category1Id = categoryIds.value[0]
      // formState.value.category2Id = categoryIds.value[1]
      axios.post("api/saveUser",formState.value).then(res=>{
        confirmLoading.value = false;
        visible.value = false;
        if (res.data.code === "200"){
          load()
          message.success(res.data.msg);
        } else {
          message.error(res.data.msg);
        }
      })

    };

    return {
      user,
      columns,
      pagination,
      handleTableChange,

      visible,
      confirmLoading,
      add,
      edit,
      del,
      handleOk,
      labelCol: { style: { width: '150px' } },
      wrapperCol: { span: 14 },
      formState,
      state,
      load,
      // loadCategory,
      // categoryIds,
      // level,
      // getCategoryName,
    }
  }
}
</script>

<style scoped>

</style>